<template>
  <div style="height: 6vh;background-image: linear-gradient(to right, #fffacd, #add8e6);padding:10px 20px;">
    <h1 style="margin: 0;line-height:60px;font-size:20px;font-weight: bold">内容审核管理</h1>
  </div>
  <!-- 查询栏 -->
  <el-card style="margin:20px;height: 70px;">
    <el-form :inline="true">
      <el-form-item style="width:250px;" label="审核状态">
        <el-select placeholder="请选择审核状态" v-model="mediaVariablesQuery.status" @change="getMediaVariables()">
          <el-option label="待审核" value="P"></el-option>
          <el-option label="已通过" value="A"></el-option>
          <el-option label="已拒绝" value="R"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="日期" style="width:220px;">
        <el-date-picker
            type="date"
            value-format="YYYY-MM-DD"
            format="YYYY-MM-DD"
            placeholder="请选择日期"
            :size="size"
            v-model="mediaVariablesQuery.reportedTime"
        />
      </el-form-item>
      <el-form-item>
        <el-button @click="resetSearch()">重置</el-button>
        <el-button type="primary" @click="getMediaVariables()">查询</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <!-- 违规展示栏 -->
  <el-card style="margin:20px;">
  <el-table :data="mediaVariables">
    <el-table-column type="index" label="编号" align="center" width="80"></el-table-column>
    <el-table-column label="内容标题" align="center" prop="title"></el-table-column>
    <el-table-column label="举报原因" align="center" prop="reason"></el-table-column>
    <el-table-column label="日期" align="center" prop="reportedTime"></el-table-column>
    <el-table-column label="审核状态" align="center" prop="status"  :formatter="TypeFormatter"></el-table-column>
    <el-table-column label="操作" align="center" width="200px">
      <template #default="scope">
        <el-button link type="primary" @click="openDialog(scope.row.id)">详情</el-button>
      </template>
    </el-table-column>
  </el-table>
<!--————————————————————————————————————————————————————————————————————————————————————-->
  <div style="margin:30px;float: right;">
    <!--layout="total(总数), sizes(每页总数), prev(上一页), pager(当前页), next(下一页), jumper(跳转页)"
     :pager-count="4" 表示显示4个页码
     :page-sizes="[5, 10, 15, 20]" 表示一共有几个"每页显示多少条"选项
     current-page当前页码 page-size当前页码的条数 total总条数 这三个变量需要和实际数据双向绑定
     :total="400" 表示总条数，需要双向绑定
     @size-change="handleSizeChange" 表示每页显示多少条改变时触发的事件
     @current-change="handleCurrentChange" 表示当前页码改变时触发的事件 -->
    <el-pagination
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[10, 20, 30, 40]"
        v-model:current-page="currentPage"
        v-model:page-size="currentSize"
        v-model:total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
    <!--————————————————————————————————————————————————————————————————————————————————————-->
  </el-card>
  <!-- 定义被举报数据的回回显栏 -->
  <el-dialog
      v-model="dialogVisible"
      title="内容审核"
      width="1000px"
  :before-close="closeDialog">
    <el-card style="padding: 0 40px;">
      <el-descriptions :column="2" border>
        <el-descriptions-item label="标题" label-align="center" align="center" width="120px">
          {{mediaVariablesDialog.title}}
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
    <el-card style="padding: 0 40px;">
      <el-descriptions :column="2" border>
        <el-descriptions-item label="违规原因" label-align="center" align="center" width="120px">
          {{ mediaVariablesDialog.reason }}
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
    <el-card style="padding: 0 40px;">
      <el-descriptions :column="1" border>
        <el-descriptions-item label="内容" label-align="center" align="center">
          <el-input type="textarea" :rows="8"
                    :readonly="true" class="non-resizable-textarea" v-model="mediaVariablesDialog.content"></el-input>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
    <el-card style="padding: 0 40px; margin-top: 20px;">
      <el-descriptions :column="1" border>
        <el-descriptions-item label="媒体内容" label-align="center" align="center">
          <div v-if="isMedia" :style="{ maxWidth: '100%', height: '400px', display: 'flex', justifyContent: 'center', alignItems: 'center', backgroundColor: '#f5f7fa' }">
            <!-- 图片预览 -->
            <img
                v-if="mediaType === 'image'"
                :src="dialogMediaVariablesUrl"
                :style="{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain' }"
                @load="handleMediaLoaded"
             alt=""/>
            <!-- 视频预览 -->
            <video
                v-else
                :src="dialogMediaVariablesUrl"
                :style="{ width: '100%', maxHeight: '400px' }"
                controls
                @loadeddata="handleMediaLoaded"
            ></video>
          </div>
          <span v-else :style="{ color: '#999' }">无媒体内容</span>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
    <!-- 操作按钮 -->
    <template #footer>
        <el-button type="primary" @click="pass" v-if="mediaVariablesDialog.status === 'P'">通过</el-button>
        <el-button type="danger" @click="refuse" v-if="mediaVariablesDialog.status === 'P'">拒绝</el-button>
        <el-button @click="closeDialog">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup>

import {computed, onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import qs from "qs";

//定义打开弹窗的变量
const dialogVisible = ref(false);
// 媒体变量
const dialogMediaVariablesUrl = ref('');
//定义变量用来保存图片上传给哪个后端接口地址
// const actionUrl = ref(BASE_URL + '/v1/file/upload');
// 定义一个查询数据的对象
const mediaVariablesQuery = ref({
  status:'',
  reportedTime:'',
  id:''
});
//定义变量保存分页器的当前页数
const currentPage = ref(1);
//定义变量保存分页器的每页显示多少条
const currentSize = ref(10);
//定义变量保存数据总条目数
const total = ref();
//修改每页显示多少条，触发此函数
const handleSizeChange = (val) => {
  console.log('每页展示' + val + '条数据');
  getMediaVariables();
}
//修改当前页码，触发此函数
const handleCurrentChange = (val) => {
  console.log('当前的页数为：' + val);
  getMediaVariables();
}

//定义一个弹窗打开后是否通过的变量
const isPass = ref({
  id:'',
  postId:'',
  status:''
});
//定义一个保存当前行id的变量
let  mediaVariablesId;
//定义一个保存帖子表单id的变量
let postId;
// 定义一个接收后端返回数据的变量
const mediaVariables = ref([]);
//定义一个弹窗打开后数据的变量
const mediaVariablesDialog = ref({
  title:'',
  reason:'',
  content:'',
  dialogMediaVariablesUrl:'',
  status:''
});
// 定义一个查询所有数据的方法
const getMediaVariables = () => {
  mediaVariablesQuery.value.pageSize = currentSize.value;
  mediaVariablesQuery.value.pageNum = currentPage.value;
  let data = qs.stringify(mediaVariablesQuery.value);
  axios.get(BASE_URL + '/p1/admin/posts?'+data).then((response) => {
    if (response.data.code === 2000){
      mediaVariables.value = response.data.data.list;
      console.log(mediaVariables.value);
      total.value = response.data.data.total;
    }else {
      ElMessage(response.data.msg);
    }
  });
}
//定义抓换表
const TypeFormatter = (row,column,cellValue,index)=>{
  if (cellValue == "P"){
    cellValue = '待审核';
  }else if (cellValue == "A"){
    cellValue = '已通过';
  }else if (cellValue == "R") {
    cellValue = '已拒绝';
  }
  return cellValue;
}


//定义打开详情的方法
const openDialog = (id) => {
  dialogVisible.value = true;
  mediaVariablesQuery.value.id = id;
  mediaVariablesQuery.value.pageSize = '';
  mediaVariablesQuery.value.pageNum = '';
  mediaVariablesId = id;
  let data = qs.stringify(mediaVariablesQuery.value);
  console.log(data);
  axios.get(BASE_URL + '/p1/admin/posts?'+data).then((response) => {
    if (response.data.code === 2000){
      mediaVariablesDialog.value = response.data.data.list[0];
      console.log(mediaVariablesDialog.value);
      postId = mediaVariablesDialog.value.postId;

    }else {
      ElMessage(response.data.msg);
    }
  });
}
// 定义一个重置搜索的方法
const resetSearch = () => {
  mediaVariablesQuery.value = {};
  getMediaVariables();
}


//定义一进入界面就加载
onMounted(()=>{
  getMediaVariables();
});


//以下是ai生成代码，还未验证
const mediaType = computed(() => {
  const url = dialogMediaVariablesUrl.value;
  if (!url) return '';
  const extension = url.split('.').pop().toLowerCase();
  return ['jpg','jpeg','png','gif','webp'].includes(extension) ? 'image' : 'video';
});

const isMedia = computed(() => !!dialogMediaVariablesUrl.value);

// 新增媒体加载处理
const handleMediaLoaded = () => {
  console.log('媒体资源加载完成');
};
//定义关闭弹窗的方法
const closeDialog = () => {
 if (confirm('确认要关闭本窗口吗?')){
   dialogVisible.value = false;
   mediaVariablesDialog.value = {};
   mediaVariablesQuery.value.id = '';
   dialogMediaVariablesUrl.value = '';
 }
}
//定义一个点击通过的方法
const pass = () => {
  isPass.value.id = mediaVariablesId;
  isPass.value.postId = postId;
  isPass.value.status = 'A';
  let datas = qs.stringify(isPass.value);
  axios.post(BASE_URL + '/p1/admin/posts/status',datas).then((response) => {
    if (response.data.code === 2000){
      ElMessage.success('通过成功!');
      dialogVisible.value = false;
      mediaVariablesDialog.value = {};
      dialogMediaVariablesUrl.value = '';
      isPass.value = {};
      mediaVariablesQuery.value.id = '';
      console.log(mediaVariablesQuery.value)
      getMediaVariables();
    }else {
      ElMessage.error(response.data.msg);
    }
  });
}
const refuse = () => {
  isPass.value.id = mediaVariablesId;
  isPass.value.postId = postId;
  isPass.value.status = 'R';
  let data = qs.stringify(isPass.value);
  axios.post(BASE_URL + '/p1/admin/posts/status',data).then((response) => {
    if (response.data.code === 2000){
      ElMessage.success('拒绝成功!');
      mediaVariablesQuery.value.id = '';
      dialogVisible.value = false;
      mediaVariablesDialog.value = {};
      dialogMediaVariablesUrl.value = '';
      isPass.value = {};
      getMediaVariables();
    }else {
      ElMessage.error(response.data.msg);
    }
  });
}





</script>

<style scoped>
.non-resizable-textarea :deep(.el-textarea__inner) {
  resize: none;          /* 禁止调整大小 */
  overflow-y: auto !important;  /* 保持垂直滚动条 */
  cursor: default;       /* 保持默认光标 */
}
</style>